
import React from 'react';
import { FloatButton, Layout, Menu } from 'antd';
import { Route, Routes, useNavigate } from 'react-router-dom';
import { Icon } from '@/components';
import { useVisible } from '@/tools/hooks';
import * as ui from './ui';
import styles from './index.module.less';

const { Content, Sider } = Layout;

const config = [
    {
        id: 'iconManage',
        label: '图标管理',
        icon: <Icon id='I202404161136' />,
        component: ui.IconManage,
    },
    {
        id: 'menuManage',
        label: '菜单管理',
        icon: <Icon id='I202404161136' />,
        component: ui.MenuManage,
    },
    {
        id: 'modulesManage',
        label: '模块管理',
        icon: <Icon id='I202404161138' />,
        component: ui.ModulesManage,
    },
    {
        id: 'capabilityManage',
        label: '能力管理',
        icon: <Icon id='I202404161138' />,
        component: ui.CapabilityManage,
    },
]

/** 开发页面 */
export default function Development() {

    const navigate = useNavigate();

    return (
        <Layout className={styles.development} >
            <Sider width={120} theme="light" >
                <Menu theme="light" mode="inline" items={config.map(e => {
                    return {
                        key: e.id,
                        label: e.label,
                        icon: e.icon,
                        onClick: () => {
                            navigate(e.id)
                        }
                    }
                })} />
            </Sider>
            <Layout>
                <Content>
                    <Routes>
                        {config.map(item => (
                            <Route key={item.id} path={item.id} element={<item.component />} />
                        ))}
                        <Route key={'modulesDetails'} path={'modulesDetails'} element={<ui.ModulesDetails />} />
                    </Routes>
                </Content>
            </Layout>
        </Layout>
    )
}


/** 开发工具按钮 */
export function DevButton() {

    const { open, onClose } = useVisible(true)

    const onClick = React.useCallback(() => {
        window.open('/dev', '/dev')
    }, [])

    if (import.meta.env.MODE === 'development' && open) {
        return (
            <FloatButton.Group shape="circle" style={{ right: 24 }}>
                <FloatButton icon={<Icon id="I202404291713" />} onClick={onClick} type='primary' />
                <FloatButton icon={<Icon id="I202404291712" />} onClick={onClose} />
            </FloatButton.Group>
        )
    } else {
        return <></>
    }
}
